<html>
<style>
    /* 
    方式一：
    .mac {
        width:10px;
        height:10px;
        border-radius:5px;
        float:left;
        margin:10px 0 0 5px;
    }
    .b1 {
        background:#E0443E;
        margin-left: 10px;
    }
    .b2 { background:#DEA123; }
    .b3 { background:#1AAB29; } */
    .warpper{
        background:#dddddd;
        border-radius:5px;
        width:400px;
    }

/* 方式二： */
    .box{ 
        position: relative; 
        padding:40px 20px 20px;
    }
    .box::before {
        content: '';
        position: absolute;
        /* -webkit-border-radius: 50%; */
        border-radius: 50%;
        background: #fc625d;
        width: 12px;
        height: 12px;
        left: 12px;
        /* -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; */
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        z-index: 4;
    }
</style>
<div class="warpper box">
    <div class="mac b1"></div>
    <div class="mac b2"></div>
    <div class="mac b3"></div>
<br>

        ```cpp
    #include<iostream>
    using namespace std;
    int main(){
        return 0;
    }
<div>
<br>
</html>
